<script lang="ts" setup>
import type { DeptTree } from '@/api/system/user/type'
import type { TreeInstance } from 'element-plus'

const props = defineProps<{
	deptOptions: DeptTree[]
}>()
const emits = defineEmits<{
	treeClick: [data: DeptTree]
}>()
const deptName = ref('')
const deptTreeRef = ref<TreeInstance>()

/** 根据名称筛选部门树 */
watch(deptName, val => {
	deptTreeRef.value?.filter(val)
})

/** 通过条件过滤节点  */
function filterNode(value: string, data: any) {
	if (!value) return true
	return data.label.indexOf(value) !== -1
}

/** 节点单击事件 */
function handleNodeClick(data: DeptTree) {
	emits('treeClick', data)
}
</script>
<template>
	<div class="bg-white p-4 mr-3 h-full">
		<el-input
			v-model="deptName"
			placeholder="请输入部门名称"
			clearable
			prefix-icon="Search"
			style="margin-bottom: 20px"
		/>

		<el-tree
			ref="deptTreeRef"
			:data="props.deptOptions"
			:props="{ label: 'label', children: 'children' }"
			:expand-on-click-node="false"
			:filter-node-method="filterNode"
			node-key="id"
			highlight-current
			default-expand-all
			@nodeClick="handleNodeClick"
		/>
	</div>
</template>

<style lang="scss" scoped></style>
